<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<meta charset="UTF-8">
	<title>-webkit-appearance | CtripUED Webkit CSS Library</title>
	
	<script type="text/javascript" src="base.js"></script>

<link rel="stylesheet" type="text/css" href="appearance_001.css" media="all">
</head>
<body>
<div class="head">
	<div class="wrap">
		<a indepth="true" href="index.html" class="logo">CtripUED Webkit CSS Library</a>
		<div class="nav">
			<ul>
				<li><a indepth="true" href="index.html">首页</a></li>
				<li><a indepth="true" href="aboutus.html#about">关于我们</a></li>
				<li><a indepth="true" href="aboutus.html#about_box">意见反馈</a></li>
				<li><a href="http://ued.ctrip.com/">CtripUED 博客</a></li>
			</ul>
		</div>
	</div>
</div>
<div class="wrap">
	<div class="side">
		<div class="filter_box">
			<div class="field" id="catalogFilter">
					<input id="key" placeholder="属性搜索..." type="search">
			</div>
		</div>
		<div class="categorys"></div>
	</div>

	<div class="main" id="main">
		<div class="position" id="position">
			您的位置: <a indepth="true" href="index.html">首页</a> &gt; -webkit-appearance
		</div>
		<!-- /position -->
		<div class="prop_intro">
			<div class="tit">
				<h1>-webkit-appearance 属性</h1>
			</div>
			<div class="prop_detail">
				按照本地默认样式显示元素外观。<a target="_top" href="http://www.w3.org/TR/css3-ui/#changes-list">W3暂无官方文档</a>。此属性非标准且渲染效果在不同浏览器下不同，有些属性值甚至不支持，请慎用。
			</div>
			<!-- /prop_detail -->
			<div class="prop_comp" style="display: block;">
				<p>
					<i class="ico_browser ico_browser_chr"><small>?</small></i>
					<i class="ico_browser ico_browser_saf"><small>?</small></i>
					<i class="ico_browser ico_browser_and"><small>?</small></i>
					<i class="ico_browser ico_browser_ios"><small>?</small></i>
				</p>
				<p>?: 表示版本号未知，但该属性可用。</p>
			</div>
			<!-- /prop_comp -->

		</div>
		<!-- /prop_intro -->
		<div class="mod prop_gramm">
			<h2 class="mod_tit">语法</h2>
			<p class="mod_con">
				<strong>-webkit-appearance:</strong> none | button | button-bevel ...
			</p>
		</div>
		<!-- /prop_gramm -->
		<div class="mod prop_value">
			<h2 class="mod_tit">取值</h2>
			<div class="mod_con">
				<table>
					<tbody><tr>
						<th>caps-lock-indicator</th>
						<td>在密码字段中出现的大写字母锁定时，指示灯处于活动状态。</td>
					</tr>
					<tr>
						<th>button</th>
						<td>看起来像个按钮，以按钮的风格渲染</td>
					</tr>
					<tr>
						<th>button-bevel</th>
						<td>渲染成button-bevel的风格</td>
					</tr>
					<tr>
						<th>caret</th>
						<td>渲染成caret的风格</td>
					</tr>
					<tr>
						<th>checkbox</th>
						<td>渲染为input:checkbox样式的复选框按钮</td>
					</tr>
					<tr>
						<th>default-button</th>
						<td>渲染为default-button的风格</td>
					</tr>
					<tr>
						<th>listbox</th>
						<td>看起来像个清单盒子，以listbox风格渲染</td>
					</tr>
					<tr>
						<th>listitem</th>
						<td>看起来像个清单列表，以listitem风格渲染</td>
					</tr>
					<tr>
						<th>media-fullscreen-button</th>
						<td>渲染为media-fullscreen-button风格</td>
					</tr>
					<tr>
						<th>media-mute-button</th>
						<td>渲染为media-mute-button风格</td>
					</tr>
					<tr>
						<th>media-play-button</th>
						<td>渲染为media-play-button风格</td>
					</tr>
					<tr>
						<th>media-seek-back-button</th>
						<td>渲染为media-seek-back-button风格</td>
					</tr>
					<tr>
						<th>media-seek-forward-button</th>
						<td>渲染为media-seek-forward-button风格</td>
					</tr>
					<tr>
						<th>media-slider</th>
						<td>渲染为media-slider风格</td>
					</tr>
					<tr>
						<th>media-sliderthumb</th>
						<td>渲染为media-sliderthumb风格</td>
					</tr>
					<tr>
						<th>menulist</th>
						<td>渲染为menulist-menulist风格</td>
					</tr>
					<tr>
						<th>menulist-button</th>
						<td>渲染为menulist-button风格</td>
					</tr>
					<tr>
						<th>menulist-text</th>
						<td>渲染为menulist-text风格</td>
					</tr>
					<tr>
						<th>menulist-textfield</th>
						<td>渲染为menulist-textfield风格</td>
					</tr>
					<tr>
						<th>none</th>
						<td>去除系统默认appearance的样式,<span class="ex">常用于IOS下移除原生样式</span></td>
					</tr>
					<tr>
						<th>push-button</th>
						<td>渲染为push-button风格</td>
					</tr>
					<tr>
						<th>radio</th>
						<td>看起来像个单选框，以radio单选框风格渲染</td>
					</tr>
					<tr>
						<th>searchfield</th>
						<td>看起来像个搜索框，以searchfield风格渲染</td>
					</tr>
					<tr>
						<th>searchfield-cancel-button</th>
						<td>渲染为searchfield-cancel-button风格</td>
					</tr>
					<tr>
						<th>searchfield-decoration</th>
						<td>渲染为searchfield-decoration风格</td>
					</tr>
					<tr>
						<th>searchfield-results-button</th>
						<td>渲染为searchfield-results-button风格</td>
					</tr>
					<tr>
						<th>searchfield-results-decoration</th>
						<td>渲染为searchfield-results-decoration风格</td>
					</tr>
					<tr>
						<th>slider-horizontal</th>
						<td>渲染为slider-horizontal风格</td>
					</tr>
					<tr>
						<th>slider-vertical</th>
						<td>渲染为lider-vertical风格</td>
					</tr>
					<tr>
						<th>sliderthumb-horizontal</th>
						<td>渲染为sliderthumb-horizontal风格</td>
					</tr>
					<tr>
						<th>sliderthumb-vertical</th>
						<td>渲染为sliderthumb-vertical风格</td>
					</tr>
					<tr>
						<th>square-button</th>
						<td>渲染为square-button风格</td>
					</tr>
					<tr>
						<th>textarea</th>
						<td>渲染为textarea风格</td>
					</tr>
					<tr>
						<th>textfield</th>
						<td>渲染为textfield风格</td>
					</tr>
					<tr>
						<th>scrollbarbutton-down</th>
						<td>渲染为scrollbarbutton-down风格</td>
					</tr>
					<tr>
						<th>scrollbarbutton-left</th>
						<td>渲染为scrollbarbutton-left风格</td>
					</tr>
					<tr>
						<th>scrollbarbutton-right</th>
						<td>渲染为scrollbarbutton-right风格</td>
					</tr>
					<tr>
						<th>scrollbarbutton-up</th>
						<td>渲染为scrollbarbutton-up风格</td>
					</tr>
					<tr>
						<th>scrollbargripper-horizontal</th>
						<td>渲染为scrollbargripper-horizontal风格</td>
					</tr>
					<tr>
						<th>scrollbargripper-vertical</th>
						<td>渲染为scrollbargripper-vertical风格</td>
					</tr>
					<tr>
						<th>scrollbarthumb-horizontal</th>
						<td>渲染为scrollbarthumb-horizontal风格</td>
					</tr>
					<tr>
						<th>scrollbarthumb-vertical</th>
						<td>渲染为scrollbarthumb-vertical风格</td>
					</tr>
					<tr>
						<th>scrollbartrack-horizontal</th>
						<td>渲染为scrollbartrack-horizontal风格</td>
					</tr>
					<tr>
						<th>scrollbartrack-vertical</th>
						<td>渲染为scrollbartrack-vertica风格</td>
					</tr>
				</tbody></table>
			</div>
		</div>
		<!-- /prop_value -->
		<div class="mod prop_demo">
			<h2 class="mod_tit">示例</h2>
			<div class="mod_con">
				<iframe id="iframedemo" style="border: 1px solid rgb(204, 204, 204);" src="appearance_001_1.html" width="100%" frameborder="0" height="400"></iframe>
				<div class="btns">
					<a indepth="true" href="appearance_002.html" target="_top" class="btn_primary">演示</a>
				</div>

			</div>
		</div>
		<!-- /prop_demo -->
	</div>
	<!-- /main -->
</div>
<!-- /wrap -->



</body></html>
